<template>
    <div class="default-main ba-table-box" ref="tableContainerRef">        
        <Header
            :column="props.column"
            :table-buttons="props.tableButtons"
            :show-com-search="props.showComSearch"
            :draggable="(props as any).draggable"
            @change-show-column="onHeaderChangeShowColumn"
            @export-table="onHeaderExportTable"
            @toggle-drag="onHeaderToggleDrag"
            @toggle-search="onHeaderToggleSearch"
        >
            <template v-slot:tableHeaderSearch>
                <slot name="tableSearch"></slot>
            </template>
        </Header>

        <!-- 批量操作工具栏 -->
        <transition name="el-fade-in-linear">
            <div v-if="selection.length > 0" class="batch-actions-toolbar">
                <span class="selected-count">已选择 {{ selection.length }} 项</span>
                <div class="batch-actions">
                    <slot name="batchActions" :selection="selection"></slot>
                    <el-button v-if="!$slots.batchActions" size="small" @click="clearSelection">取消选择</el-button>
                </div>
            </div>
        </transition>

        <el-table
        ref="tableRef"
        class="ba-data-table w100"
        header-cell-class-name="table-header-cell"
        :border="true"
        v-bind="$attrs"
        :data="props.data"
        :row-class-name="tableRowClassName"
        @row-click="handleRowClick"
        @row-contextmenu="handleRowContextMenu"
        @selection-change="handleSelectionChange"
        v-loading="props.loading">
            <!-- 添加选择列 -->
            <el-table-column v-if="selectionEnabled" type="selection" width="55"></el-table-column>
            <template v-for="(item, key) in visibleColumns" :key="item.prop || key">
                <!-- 渲染为 slot -->
                <Column v-if="item.slotName || item.headerSlotName" :attr="item">
                    <template #header v-if="item.headerSlotName">
                        <slot :name="item.headerSlotName"></slot>
                    </template>
                    <template #default="scope" v-if="item.slotName">
                        <slot :name="item.slotName" :data="scope"></slot>
                    </template>
                </Column>
                <!-- 普通列 -->
                <Column v-else :attr="item"></Column>
            </template>
        </el-table>

        <div v-if="props.pagination" class="table-pagination">
            <el-pagination
                :currentPage="props.pagination?.currentPage"
                :page-size="props.pagination?.pageSize"
                :page-sizes="props.pagination?.pageSizes"
                background
                :layout="props.pagination?.layout"
                :total="props.pagination?.total"
                @size-change="props.pagination?.onTableSizeChange"
                @current-change="props.pagination?.onTableCurrentChange"
            ></el-pagination>
        </div>
        <slot name="footer"></slot>
        
        <!-- 表格行右键菜单 -->
        <TableContextMenu
            ref="contextMenuRef"
            :default-items="contextMenuItems"
            @menu-item-click="onContextMenuItemClick"
        />
    </div>
</template>

<script setup lang="ts">
import { computed, provide, onMounted, onBeforeUnmount, nextTick, ref, watch, onUnmounted, onActivated, onDeactivated, markRaw, shallowRef } from 'vue'
import type { ElTable, TableInstance } from 'element-plus'
import Header from '/@/components/table/header/index.vue'
import Column from '/@/components/table/column/index.vue'
import TableContextMenu from '/@/components/table/contextMenu/index.vue'
import baTableClass from '/@/utils/baTable'
import Sortable from 'sortablejs'
import { ElMessage } from 'element-plus'

interface ContextMenuItem {
    name: string
    label: string
    icon?: string
    disabled?: boolean
    rowAction?: string
}

interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
    // 表格加载状态
    loading?: boolean,
    // 表格列定义
    column: TableColumn[],
    // 表格数据
    data?: TableRow[],
    //表格上是否显示公用查询
    showComSearch?: boolean,
    //表格上的按钮组
    tableButtons?:TableButton[],
    //分页属性
    pagination?: TablePagination | undefined,
    //表格ID，用于持久化设置
    tableId?: string,
    // 是否启用多选
    selectionEnabled?: boolean,
    // 是否启用右键菜单
    contextMenuEnabled?: boolean,
    // 自定义右键菜单项
    contextMenuItems?: ContextMenuItem[],
    // 拖拽配置
    draggable?: {
        row: boolean,
        column: boolean
    }
}

const props = withDefaults(defineProps<Props>(), {
    loading: false,
    column:()=>[],
    data: ()=>[],
    showComSearch:false,
    tableButtons:()=>[],
    tableId: '',
    selectionEnabled: false,
    contextMenuEnabled: false,
    contextMenuItems: ()=>[],
    draggable: () => ({ row: false, column: false })
})

const emit = defineEmits([
    'selection-change', 
    'row-context-menu', 
    'context-menu-click',
    'row-drag-end',
    'column-drag-end',
    'update:showComSearch'
])

const tableRef = shallowRef<InstanceType<typeof ElTable> | null>(null)
const tableContainerRef = shallowRef<HTMLDivElement | null>(null)
const selection = ref<TableRow[]>([])
const contextMenuRef = shallowRef<any>(null)
// 用于控制动画帧的标志
const isComponentMounted = ref(true)
const isComponentActive = ref(true)
// 存储sortable实例以便销毁
const rowSortableInstance = shallowRef<Sortable | null>(null)
const columnSortableInstance = shallowRef<Sortable | null>(null)
// 存储动画帧ID，用于取消
const animationFrameIds = ref<number[]>([])

// baTableClass 只做静态方法和拖拽逻辑，不再存储响应式数据
const baTable = markRaw(new baTableClass({
    tableId: props.tableId
}))

// 提供表格工具类实例给子组件
provide('tableData', baTable)

// 计算可见列，直接用 props.column
const visibleColumns = computed(() => {
    if (!props.column) return []
    return props.column.filter((item: TableColumn) => item.show !== false)
})

// 表格行样式
const tableRowClassName = ({row, rowIndex}: {row: TableRow, rowIndex: number}) => {
    return ''
}

// 点击行
const handleRowClick = (row: TableRow, column: TableColumn, event: Event) => {
    // 不需要处理
}

// 处理行右键菜单
const handleRowContextMenu = (row: TableRow, column: TableColumn, event: MouseEvent) => {
    if (!props.contextMenuEnabled || !isComponentMounted.value) return
    
    // 阻止默认的上下文菜单
    event.preventDefault()
    
    // 显示自定义右键菜单
    if (contextMenuRef.value) {
        contextMenuRef.value.showContextMenu(event, row)
        
        // 触发行右键菜单事件
        emit('row-context-menu', { row, column, event })
    }
}

// 处理右键菜单项点击
const onContextMenuItemClick = (data: any) => {
    if (!isComponentMounted.value) return
    
    const { item, row } = data
    emit('context-menu-click', { item, row })
    
    // 如果没有监听事件，使用默认处理
    if (emit.length === 0) {
        switch (item.rowAction) {
            case 'view':
                ElMessage.info(`查看行数据: ${JSON.stringify(row)}`)
                break
            case 'edit':
                ElMessage.info(`编辑行数据: ${JSON.stringify(row)}`)
                break
            case 'delete':
                ElMessage.warning(`删除行数据: ${JSON.stringify(row)}`)
                break
        }
    }
}

// 处理多选变化
const handleSelectionChange = (rows: TableRow[]) => {
    if (!isComponentMounted.value) return
    selection.value = rows
    emit('selection-change', rows)
}

// 清除所有选择
const clearSelection = () => {
    if (tableRef.value && isComponentMounted.value) {
        tableRef.value.clearSelection()
    }
}

// 取消所有动画帧
const cancelAnimationFrames = () => {
    animationFrameIds.value.forEach(id => {
        cancelAnimationFrame(id)
    })
    animationFrameIds.value = []
}

// 重新载入表格 - 解决一些渲染问题
const reloadTable = () => {
    if (!isComponentMounted.value) return
    nextTick(() => {
        if (tableRef.value && isComponentMounted.value) {
            try {
                tableRef.value.doLayout()
            } catch (error) {
                console.error('表格重新布局失败:', error)
            }
        }
    })
}

// 清理所有拖拽实例和动画帧
const cleanupResources = () => {
    // 取消所有动画帧
    cancelAnimationFrames()
    
    // 设置标志，停止动画帧循环
    isComponentMounted.value = false
    
    // 销毁Sortable实例
    if (rowSortableInstance.value) {
        try {
            rowSortableInstance.value.destroy()
            rowSortableInstance.value = null
        } catch (e) {
            // 忽略错误，避免崩溃
        }
    }
    
    if (columnSortableInstance.value) {
        try {
            columnSortableInstance.value.destroy()
            columnSortableInstance.value = null
        } catch (e) {
            // 忽略错误，避免崩溃
        }
    }
}

// 初始化时延迟执行拖拽功能，确保DOM元素已经渲染完成
const initDraggable = () => {
    if (!isComponentMounted.value || !isComponentActive.value) return
    
    console.log('开始初始化拖拽功能，当前配置:', props.draggable)
    
    // 使用 MutationObserver 来确保表格已完全渲染
    const observer = new MutationObserver(() => {
        // 使用nextTick确保Vue DOM更新完成
        nextTick(() => {
            if (!isComponentMounted.value) {
                observer.disconnect()
                return
            }
            
            try {
                // 检查表格元素是否已渲染
                const tableBodyEl = tableContainerRef.value?.querySelector('.ba-data-table .el-table__body-wrapper tbody')
                const tableHeaderEl = tableContainerRef.value?.querySelector('.ba-data-table .el-table__header-wrapper thead tr')
                
                if (tableBodyEl && tableHeaderEl) {
                    console.log('表格DOM已渲染完成，初始化拖拽')
                    watchRowDraggable()
                    watchColumnDraggable()
                    observer.disconnect()
                } else {
                    console.log('表格DOM尚未完全渲染:', {
                        tableBody: !!tableBodyEl,
                        tableHeader: !!tableHeaderEl
                    })
                }
            } catch (error) {
                console.error('初始化拖拽失败:', error)
            }
        })
    })
    
    // 监听表格元素的变化
    if (tableContainerRef.value) {
        observer.observe(tableContainerRef.value, {
            childList: true,
            subtree: true
        })
        
        // 立即尝试初始化一次，以防表格DOM已经准备好
        nextTick(() => {
            try {
                watchRowDraggable()
                watchColumnDraggable()
            } catch (e) {
                console.log('首次初始化拖拽尝试失败，等待DOM渲染:', e)
            }
        })
        
        // 设置超时保护，避免观察器无限等待
        setTimeout(() => {
            observer.disconnect()
            // 尝试直接初始化
            if (isComponentMounted.value && isComponentActive.value) {
                try {
                    console.log('超时保护触发，尝试最后初始化')
                    watchRowDraggable()
                    watchColumnDraggable()
                } catch (e) {
                    console.error('超时后初始化拖拽失败:', e)
                }
            }
        }, 2000)
    }
}

// 表格挂载和激活时执行
onMounted(() => {
    // 组件挂载时设置标志
    isComponentMounted.value = true
    // 延迟初始化拖拽功能，确保DOM已加载
    initDraggable()
})

// 添加对 draggable 属性的监听，以便动态更新拖拽状态
watch(() => props.draggable, (newVal, oldVal) => {
    if (!isComponentMounted.value || !isComponentActive.value) return
    
    console.log('draggable 配置改变:', oldVal, '->', newVal)
    
    // 如果行拖拽状态发生变化
    if (newVal?.row !== oldVal?.row && rowSortableInstance.value) {
        const shouldBeDisabled = !newVal?.row
        console.log('更新行拖拽禁用状态:', shouldBeDisabled)
        rowSortableInstance.value.option('disabled', shouldBeDisabled)
    }
    
    // 如果列拖拽状态发生变化
    if (newVal?.column !== oldVal?.column && columnSortableInstance.value) {
        const shouldBeDisabled = !newVal?.column
        console.log('更新列拖拽禁用状态:', shouldBeDisabled)
        columnSortableInstance.value.option('disabled', shouldBeDisabled)
    }
}, { deep: true })

// 表格被激活时重新初始化（用于keep-alive场景）
onActivated(() => {
    isComponentActive.value = true
    
    // 重新初始化
    if (!rowSortableInstance.value && !columnSortableInstance.value) {
        initDraggable()
    }
})

// 表格被禁用时清理资源（keep-alive场景）
onDeactivated(() => {
    isComponentActive.value = false
    cancelAnimationFrames()
})

// 组件销毁前完全清理资源
onBeforeUnmount(() => {
    cleanupResources()
})

// 组件销毁时确保所有资源都被清理
onUnmounted(() => {
    cleanupResources()
})

// 处理 header 事件
const onHeaderChangeShowColumn = ({ field, value }: { field: string, value: any }) => {
    // 直接修改 props.column 的 show 字段（需保证父组件传递的是 reactive）
    const col = props.column.find((c: any) => c.prop === field)
    if (col) col.show = value
}

const onHeaderExportTable = (type: string) => {
    try {
        if (!baTable || !props.data || props.data.length === 0) {
            ElMessage.warning('没有可导出的数据')
            return
        }
        
        // 调用baTable的导出方法
        baTable.exportTable({
            filename: props.tableId ? props.tableId : '导出数据',
            type: type as 'csv' | 'excel',
            columns: props.column || [],
            data: props.data || []
        })
    } catch (error) {
        console.error('导出失败:', error)
        ElMessage.error('导出失败，请稍后重试')
    }
}

const onHeaderToggleDrag = (type: string) => {
    if ((props as any).draggable) {
        if (type === 'row') (props as any).draggable.row = !(props as any).draggable.row
        if (type === 'column') (props as any).draggable.column = !(props as any).draggable.column
    }
}

const onHeaderToggleSearch = () => {
    // 触发事件通知父组件更新 showComSearch 的值，而不是直接修改 props
    emit('update:showComSearch', !props.showComSearch)
}


// 只监听数据、列、分页变化用于副作用（如刷新布局），不做数据同步
// watch(() => props.data, reloadTable, { deep: true })
// watch(() => props.column, reloadTable, { deep: true })
// watch(() => props.pagination, reloadTable, { deep: true })


// 监听行拖拽启用状态变化
const watchRowDraggable = () => {
    if (!isComponentMounted.value || !isComponentActive.value) return
    
    // 尝试多种选择器来找到正确的行容器
    let tableEl = tableContainerRef.value?.querySelector('.ba-data-table .el-table__body-wrapper tbody')
    if (!tableEl) {
        tableEl = tableRef.value?.$el.querySelector('.el-table__body-wrapper tbody')
    }
    if (!tableEl) {
        tableEl = document.querySelector('.ba-data-table .el-table__body-wrapper tbody')
    }
    
    // 如果找不到元素，记录错误并退出
    if (!tableEl) {
        console.error('找不到表格行容器元素，无法初始化行拖拽')
        return
    }
    
    console.log('找到表格行容器:', tableEl)
    
    try {
        // 销毁旧的实例
        if (rowSortableInstance.value) {
            rowSortableInstance.value.destroy()
            rowSortableInstance.value = null
        }
        
        // 确定拖拽是否应该被禁用
        const isDisabled = typeof props.draggable?.row === 'boolean' ? !props.draggable.row : true
        console.log('初始化行拖拽，禁用状态:', isDisabled, '配置:', props.draggable)
          // 创建新的 Sortable 实例
        rowSortableInstance.value = Sortable.create(tableEl as HTMLElement, {
            animation: 300,
            disabled: isDisabled,
            handle: '.el-table__row',            ghostClass: 'drag-row-ghost',
            delay: 50,
            onStart: () => {
                console.log('开始行拖拽')
            },
            onEnd: (evt) => {
                console.log('行拖拽结束:', evt.oldIndex, '->', evt.newIndex)
                if (!isComponentMounted.value) return
                if (evt.oldIndex !== undefined && evt.newIndex !== undefined && evt.oldIndex !== evt.newIndex) {
                    try {
                        // 获取移动的数据
                        const movedRow = props.data?.[evt.oldIndex]
                        // 创建数据副本
                        const newData = [...(props.data || [])]
                        // 从原位置删除
                        newData.splice(evt.oldIndex, 1)
                        // 添加到新位置
                        newData.splice(evt.newIndex, 0, movedRow)
                        
                        // 触发事件通知父组件数据已更改
                        emit('row-drag-end', {
                            oldIndex: evt.oldIndex,
                            newIndex: evt.newIndex,
                            data: newData
                        })
                          // 兼容旧版API
                        if (baTable) {
                            baTable.onRowDragEnd(evt.oldIndex, evt.newIndex)
                        }
                        
                        // 拖拽后重新调整表格布局
                        nextTick(() => {
                            try {
                                if (tableRef.value) {
                                    console.log('重新调整表格布局')
                                    tableRef.value.doLayout()
                                }
                            } catch (e) {
                                console.error('重新布局失败:', e)
                            }
                        })
                    } catch (e) {
                        console.error('处理行拖拽结束事件失败:', e)
                    }
                }
            }
        })

        // 监控拖拽状态变化
        if (isComponentMounted.value && isComponentActive.value) {
            const checkDraggable = () => {
                if (!isComponentMounted.value || !isComponentActive.value) return
                try {                    if (rowSortableInstance.value) {
                        const shouldBeDisabled = !props.draggable?.row
                        if (rowSortableInstance.value.option("disabled") !== shouldBeDisabled) {
                            console.log('更新行拖拽状态:', !shouldBeDisabled)
                            rowSortableInstance.value.option("disabled", shouldBeDisabled)
                        }
                    }
                    if (isComponentMounted.value && isComponentActive.value) {
                        const id = requestAnimationFrame(checkDraggable)
                        animationFrameIds.value.push(id)
                    }
                } catch (e) {}            }
            const id = requestAnimationFrame(checkDraggable)
            animationFrameIds.value.push(id)
        }
    } catch (error) {
        console.error('初始化行拖拽失败:', error)
    }
}

// 重新实现列拖拽方法，确保语法正确
const watchColumnDraggable = () => {
    if (!isComponentMounted.value || !isComponentActive.value) return
    
    // 尝试多种选择器来找到正确的表头行
    let tableEl = tableContainerRef.value?.querySelector('.ba-data-table .el-table__header-wrapper thead tr')
    
    if (!tableEl) {
        tableEl = tableRef.value?.$el.querySelector('.el-table__header-wrapper thead tr')
    }
    
    if (!tableEl) {
        tableEl = document.querySelector('.ba-data-table .el-table__header-wrapper thead tr')
    }
    
    // 尝试更简单的选择器
    if (!tableEl) {
        tableEl = document.querySelector('.el-table__header tr')
    }
    
    // 记录调试信息
    console.debug('表头元素:', tableEl, '拖拽状态:', props.draggable)
    
    if (!tableEl) {
        console.error('找不到表头行元素，无法初始化列拖拽')
        return
    }
    
    try {
        // 先销毁旧实例
        if (columnSortableInstance.value) {
            columnSortableInstance.value.destroy()
        }
        
        // 创建新实例
        const isDisabled = typeof props.draggable?.column === 'boolean' ? !props.draggable.column : true
        console.log('初始化列拖拽，禁用状态:', isDisabled, '配置:', props.draggable)
        columnSortableInstance.value = Sortable.create(tableEl as HTMLElement, {
            animation: 300,
            disabled: isDisabled,            handle: '.el-table__cell',
            ghostClass: 'drag-column-ghost',
            delay: 50,
            onStart: () => {
                console.log('开始列拖拽')
            },onEnd: (evt) => {
                console.log('列拖拽结束:', evt.oldIndex, '->', evt.newIndex)
                if (!isComponentMounted.value) return
                if (evt.oldIndex !== undefined && evt.newIndex !== undefined && evt.oldIndex !== evt.newIndex) {
                    try {
                        // 获取移动的列
                        const columns = [...(props.column || [])]
                        const movedColumn = columns[evt.oldIndex]
                        
                        // 从原位置删除
                        columns.splice(evt.oldIndex, 1)
                        // 添加到新位置
                        columns.splice(evt.newIndex, 0, movedColumn)
                        
                        // 触发事件通知父组件列已更改
                        emit('column-drag-end', {
                            oldIndex: evt.oldIndex,
                            newIndex: evt.newIndex,
                            columns: columns
                        })
                        
                        // 兼容旧版API
                        if (baTable) {
                            baTable.onColumnDragEnd(evt.oldIndex, evt.newIndex)
                        }
                        
                        // 拖拽后重新调整表格布局
                        nextTick(() => {
                            try {
                                if (tableRef.value) {
                                    console.log('重新调整表格布局')
                                    tableRef.value.doLayout()
                                }
                            } catch (e) {
                                console.error('重新布局失败:', e)
                            }
                        })
                    } catch (e) {
                        console.error('处理列拖拽结束事件失败:', e)
                    }
                }
            }
        })
        
        // 监控拖拽启用状态
        if (isComponentMounted.value && isComponentActive.value) {
            const checkDraggable = () => {
                if (!isComponentMounted.value || !isComponentActive.value) return
                try {                    if (columnSortableInstance.value) {
                        const shouldBeDisabled = !props.draggable?.column
                        if (columnSortableInstance.value.option("disabled") !== shouldBeDisabled) {
                            console.log('更新列拖拽状态:', !shouldBeDisabled)
                            columnSortableInstance.value.option("disabled", shouldBeDisabled)
                        }
                    }
                    if (isComponentMounted.value && isComponentActive.value) {
                        const id = requestAnimationFrame(checkDraggable)
                        animationFrameIds.value.push(id)
                    }
                } catch (e) {}            }
            const id = requestAnimationFrame(checkDraggable)
            animationFrameIds.value.push(id)
        }
    } catch (error) {
        console.error('初始化列拖拽失败:', error)
    }
}

// 安全地启用/禁用行拖拽
const toggleRowDrag = (enable: boolean) => {
    if (!isComponentMounted.value) return
    
    console.log('toggleRowDrag:', enable)
    
    // 更新实例设置
    if (rowSortableInstance.value) {
        try {
            rowSortableInstance.value.option("disabled", !enable)
            console.log('行拖拽实例状态已更新:', !enable)
        } catch (e) {
            console.error('更新行拖拽状态出错，尝试重新初始化:', e)
            // 如果出错，尝试重新初始化
            nextTick(() => watchRowDraggable())
        }
    } else {
        console.log('行拖拽实例不存在，初始化中...')
        nextTick(() => watchRowDraggable())
    }
}

// 安全地启用/禁用列拖拽
const toggleColumnDrag = (enable: boolean) => {
    if (!isComponentMounted.value) return
    
    console.log('toggleColumnDrag:', enable)
    
    // 更新实例设置
    if (columnSortableInstance.value) {
        try {
            columnSortableInstance.value.option("disabled", !enable)
            console.log('列拖拽实例状态已更新:', !enable)
        } catch (e) {
            console.error('更新列拖拽状态出错，尝试重新初始化:', e)
            // 如果出错，尝试重新初始化
            nextTick(() => watchColumnDraggable())
        }
    } else {
        console.log('列拖拽实例不存在，初始化中...')
        nextTick(() => watchColumnDraggable())
    }
}

// 刷新表格布局
const refreshLayout = () => {
    if (!isComponentMounted.value) return
    
    nextTick(() => {
        if (tableRef.value && isComponentMounted.value) {
            try {
                tableRef.value.doLayout()
            } catch (e) {
                console.error('刷新表格布局失败:', e)
            }
        }
    })
}

// 暴露baTable实例，使其可以在组件外部访问
defineExpose({
    baTable,
    tableRef,
    clearSelection,
    contextMenuRef,
    toggleRowDrag,
    toggleColumnDrag,
    refreshLayout
})
</script>

<style scoped lang="scss">
.default-main.ba-table-box {
    margin: 24px 40px;
    padding: 0;
    overflow: hidden;
    background-color: var(--ba-bg-color-overlay);
    border-radius: 14px;
    box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.12);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.ba-data-table {
    margin: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-left: 16px;
    padding-right: 16px;
    
    // 表头样式优化
    :deep(.el-table__header) {
        th {
            background-color: var(--el-fill-color-light);
            font-weight: 600;
            color: var(--el-text-color-primary);
            height: 48px;
            padding: 12px 0;
            
            .cell {
                padding: 0 10px;
                font-size: 15px;
            }
        }
    }
    
    // 表格行样式优化
    :deep(.el-table__row) {
        cursor: pointer;
        td {
            padding: 14px 0;
            transition: background-color 0.2s ease;
            
            .cell {
                padding: 0 10px;
                font-size: 14px;
                line-height: 1.6;
            }
        }
        
        &:hover > td {
            background-color: var(--el-fill-color-lighter);
        }
    }
}

.ba-data-table :deep(.el-button + .el-button) {
    margin-left: 6px;
}

.ba-data-table :deep(.table-header-cell) .cell {
    color: var(--el-text-color-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.table-pagination {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
    padding: 20px 24px;
    display: flex;
    justify-content: flex-end;
}

// 拖拽样式
.ba-data-table :deep(.drag-row-ghost) {
    opacity: 0.8;
    background-color: var(--el-color-primary-light-9);
}

.ba-data-table :deep(.drag-column-ghost) {
    opacity: 0.8;
    background-color: var(--el-color-primary-light-9);
}

// 可拖拽行样式
.ba-data-table :deep(.el-table__row) {
    cursor: pointer;
}

// 批量操作工具栏
.batch-actions-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background-color: rgba(var(--el-color-primary-rgb), 0.08);
    margin: 0 0 20px 0;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(var(--el-color-primary-rgb), 0.2);
    
    .selected-count {
        font-weight: 600;
        color: var(--el-color-primary);
        font-size: 15px;
    }
    
    .batch-actions {
        display: flex;
        gap: 12px;
        
        .el-button {
            transition: all 0.3s ease;
            
            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            }
        }
    }
}
</style>
